<!--
 * 首页的图表显示
-->
<template>
  <div style="display: flex;flex-wrap: wrap">
    <el-card v-show="this.firstOrSecond == 1" style="width: 100%">
      <div id="firstMain" style="width: 100%; height: 500px;"></div>
    </el-card>
    <el-card v-show="this.firstOrSecond == 2" style="width: 100%">
      <div id="secondMain" style="width: 100%; height: 500px;"></div>
    </el-card>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getIndexList } from "@/api/vadmin";
import { Decrypt } from "@/utils/AesHmacMD5";

export default {
  name: "indexEcharts",
  data() {
    return {
      queryInfo: {
        qy: "", //区域
        lx: "", //类型
        startTime: "", //开始事件
        endTime: "" //结束时间
      },
      firstOrSecond: 1,
      barOrLine: 'bar', //柱状图或者折线图
      title: ''
    };
  },
  mounted() {
    this.getIndexList();
  },
  methods: {
    generateQueryInfo() {
      // 定义区域和类型的值
      const qyValues = ["1", "2", "3", "4"];
      const lxValues = ["1", "2"];

      // 随机选择区域
      const randomQy = qyValues[Math.floor(Math.random() * qyValues.length)];

      // 如果区域为4，lx只能是'1'
      let randomLx;
      if (randomQy === "4") {
        randomLx = "1";
      } else {
        randomLx = lxValues[Math.floor(Math.random() * lxValues.length)];
      }

      // 获取当前年份和月份
      const currentDate = new Date();
      const currentYear = currentDate.getFullYear();
      const currentMonth = String(currentDate.getMonth() + 1).padStart(2, "0");

      // 组装startTime和endTime
      const startTime = `${currentYear}-01`;
      const endTime = `${currentYear}-${currentMonth}`;

      // 返回更新后的queryInfo对象
      return {
        qy: randomQy,
        lx: randomLx,
        startTime: startTime,
        endTime: endTime
      };
    },
    //获取成本分析===>东部探井成本分析
    getIndexList() {
      this.queryInfo = this.generateQueryInfo()
      this.firstOrSecond = this.queryInfo.lx
      if(this.queryInfo.qy == 1) this.title = '东部探井'
      if(this.queryInfo.qy == 2) this.title = '东部常规'
      if(this.queryInfo.qy == 3) this.title = '东部非常规'
      if(this.queryInfo.qy == 4) this.title = '东部勘探'
      if(this.queryInfo.qy == 4) this.queryInfo.lx = '1'
      getIndexList(this.addDateRange(this.queryInfo)).then(res => {
        let resData =  JSON.parse(Decrypt(res.data))
        console.log(this.queryInfo,resData, '===============>');
        if(this.queryInfo.qy == 4) {
          //投资y轴数据
          let tzYData = []
          //探井口数y轴数据
          let tjksYData = []
          //探井进尺y轴数据
          let tjjcYData = []
          resData.results.y_weeks.map(item => {
            tzYData.push(item[0])
            tjksYData.push(item[1])
            tjjcYData.push(item[2])
          })

          this.$nextTick(() => {
            this.initFirstChart(resData.results.x_weeks,tzYData,tjksYData,tjjcYData,'firstMain', this.title + '投资工作量分析')
          });
        }else if(this.queryInfo.lx == 1) {
          //投资y轴数据
          let tzYData = []
          //探井口数y轴数据
          let tjksYData = []
          //探井进尺y轴数据
          let tjjcYData = []
          resData.results.y_weeks.map(item => {
            tzYData.push(item[0])
            tjksYData.push(item[1])
            tjjcYData.push(item[2])
          })

          this.$nextTick(() => {
            this.initFirstChart(resData.results.x_weeks,tzYData,tjksYData,tjjcYData,'firstMain', this.title + '投资工作量分析')
          });
        }else if (this.queryInfo.lx == 2) {
          console.log('选择的是成本分析');


          let yData = resData.results.y_weeks.flat()
          this.$nextTick(() => {
            this.initSecondChart(resData.results.x_weeks,yData,'secondMain', this.title + '成本分析')
          });

        }

      })
    },

    //投资工作量图表
    initFirstChart(xData, tzYData, tjksYData,tjjcYData,id,title) {
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      let option;
      const colors = ['#5470C6', '#30b905', '#ff0000'];
      option = {
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        title: {
          text: title
        },
        legend: {
          data: ['探井口数', '探井进尺', '投资']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            // prettier-ignore
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '探井(口数)',
            position: 'right',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0]
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '探井进尺(万米)',
            position: 'right',
            alignTicks: true,
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1]
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '金额(万元)',
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[2]
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '探井口数',
            type: this.barOrLine,
            data: tjksYData,
            barWidth: 25,
            label: {
              show: true,
              position: 'top',  // 设置标签显示在柱子上方
              formatter: '{c}',  // 显示柱子上的数值
              color: colors[0],  // 设置字体颜色
              fontSize: 12  // 设置字体大小
            },
            itemStyle: {
              color: colors[0]
            },
            barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
          },
          {
            name: '探井进尺',
            type: this.barOrLine,
            yAxisIndex: 1,
            data: tjjcYData,
            barWidth: 25,
            label: {
              show: true,
              position: 'top',  // 设置标签显示在柱子上方
              formatter: '{c}',  // 显示柱子上的数值
              color: colors[1],  // 设置字体颜色
              fontSize: 12  // 设置字体大小
            },
            itemStyle: {
              color: colors[1]
            },
            barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
          },
          {
            name: '投资',
            type: 'line',
            yAxisIndex: 2,
            data: tzYData,
            label: {
              show: true,
              position: 'top',  // 设置标签显示在柱子上方
              formatter: '{c} 万元',  // 显示柱子上的数值
              color: colors[2],  // 设置字体颜色
              fontSize: 12  // 设置字体大小
            },
            itemStyle: {
              color: colors[2]
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },

    //成本分析图表
    initSecondChart(xData, yData,id,title) {
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      let option;
      // // 线性渐变色的设置
      // const gradientColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //   { offset: 0, color: '#83bff6' }, // 起始颜色
      //   { offset: 1, color: '#188df0' }  // 结束颜色
      // ]);

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // 自定义提示框的显示格式
          formatter: function (params) {
            // 只显示第一个系列的数据
            let firstSeries = params[0];
            let color = firstSeries.color;  // 获取该系列的颜色

            // 返回带颜色小圆点的HTML格式
            return `<span style="display:inline-block;width:10px;height:10px;background-color:#188df0;border-radius:50%;margin-right:5px;"></span>`
              + '金额' + ': ' + firstSeries.value + ' 元/(米)';
          }
        },
        legend: {
          data: '金额(万元)'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        title: {
          text:title
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额(元)',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            type: this.barOrLine,
            barWidth: '30%',
            itemStyle: {
              // 使用线性渐变色
              color: '#4F81BD'
            },
            label: {
              show: true,
              position: 'top',  // 设置标签显示在柱子上方
              formatter: '{c} 元/(米)',  // 显示柱子上的数值
              color: '#053062',  // 设置字体颜色
              fontSize: 12  // 设置字体大小
            },
            data: yData
          },
          {
            type: 'line',
            barWidth: '30%',
            itemStyle: {
              // 使用线性渐变色
              color: '#022e52'
            },
            data: yData
          }
        ]
      };

      option && myChart.setOption(option);

    },
  }
};
</script>

<style scoped>

</style>
